<html>
  <head>
    <link href="gridview.css" rel="stylesheet" type="text/css">
	<script type="text/javascript">
  
    /// Constructor for the OpenPanelGrid class.
	function OpenPanelGrid()
	{
		this.sizes = [300];
		this.headers = ["Item"];
		this.keys = ["item"];
		this.totalWidth = 301;
		this.haveActiveSelection = false;
	}
	
	/// Bind an OpenPanelGrid object to a DOM node.
	/// @param parentidorobj If a string, the id of the parent object, if an
	///						 object, a reference to said parent.
	/// @param def An associative array in the form: {key:[title,width]}.
	/// @param height The wanted height of the grid. If not 0, the following
	///               parameters will be ignored.
	/// @param top If height is 0, the grid will be set up using css fixed
	///            positioning, provide the top pixel offset here.
	/// @param bottom The bottom pixel offset for p
  	OpenPanelGrid.prototype.create = function(parentidorobj,def,width,height,
  											  top,bottom,marginleft)
  	{
  		this.sizes = new Array();
  		this.headers = new Array();
  		this.keys = new Array();
  		this.rowsByID = new Array();
  		
  		var tabWidthWeight = 0;
  		var count = 0;
  		
  		for (var ki in def)
  		{
  			count++;
  			var w = def[ki][1];
  			if (w>0)
  			{
	  			tabWidthWeight += def[ki][1];
	  		}
	  		else
	  		{
	  			def[ki][1] = 10;
	  			tabWidthWeight += 10;
	  		}
  		}
  		
  		var widthLeftForTabs = width - 19 - (5*count);
  		if (tabWidthWeight == 0) return;
  		
  		tabWidthWeight = widthLeftForTabs / tabWidthWeight;
  		
  		var parent;
  		if (typeof(parentidorobj) == "string")
  		{
  			parent = document.getElementById(parentidorobj);
  		}
  		else parent = parentidorobj;
  		
  		this.totalWidth = width;
  		var i = 0;
  		
  		for (var ki in def)
  		{
  			this.headers[i] = def[ki][0];
  			this.sizes[i] = parseInt (def[ki][1] * tabWidthWeight);
  			this.keys[i] = ki;
  			i++;
  		}
  		
		var gridViewNode = document.createElement ("div");
		gridViewNode.className = "gridView";
		gridViewNode.style.width = "" + this.totalWidth + "px";
		if (height)
		{
			gridViewNode.style.height = "" + height + "px";
		}
		else
		{
			gridViewNode.style.top = "" + top + "px";
			gridViewNode.style.position = "fixed";
			gridViewNode.style.left = "50%";
			gridViewNode.style.marginLeft = marginleft;
			gridViewNode.style.bottom = "" + bottom + "px";
		}
		var gridViewTitle = document.createElement ("div");
		gridViewTitle.className = "gridViewTitle";
		gridViewTitle.style.width = "" + this.totalWidth + "px";
		gridViewNode.appendChild (gridViewTitle);
		
		if (this.sizes.length == 1) this.totalWidth += 1;
		
		var gridViewContents = document.createElement ("div");
		gridViewContents.className = "gridViewContents";
		gridViewContents.style.width = "" + this.totalWidth + "px";
		if (height)
		{
			gridViewContents.style.height = "" + (height - 15) + "px";
		}
		else
		{
			gridViewContents.style.top = "" + (top+16) + "px";
			gridViewContents.style.position = "fixed";
			gridViewContents.style.left = "50%";
			gridViewContents.style.marginLeft = marginleft;
			gridViewContents.style.bottom = "" + bottom + "px";
		}
		
		this.contents = gridViewContents;
		gridViewNode.appendChild (gridViewContents);
		
		for (i=0; i<this.sizes.length; ++i)
		{
			var sz = this.sizes[i];
			if (i==(this.sizes.length -1)) sz += 5;
			
			var gridViewTitleItem = document.createElement ("div");
			gridViewTitleItem.className = "gridViewTitleItem";
			gridViewTitleItem.style.width = "" + sz + "px";
			gridViewTitleItem.innerHTML = this.headers[i];
			gridViewTitle.appendChild (gridViewTitleItem);
		}
		
		parent.appendChild(gridViewNode);
  	}
    
    /// Add a single selectable line
    /// \param id The id of this line
    /// \param values The dictionary with the columns.
	OpenPanelGrid.prototype.addGridLine = function(id,values)
	{
		var i=0;
		var self = this;
		var row = document.createElement ("div");
		row.className = "gridViewRow";
		row.style.width = "" + (this.totalWidth) + "px";
		row.onclick = function()
		{
			if (self.haveActiveSelection == true)
			{
				self.selectedObject.style.background = "";
			}
			this.style.background = "url(selected.png)";
			self.haveActiveSelection = true;
			self.handleClick (this,id,values);
		}
		
		for (i=0; i<this.sizes.length; ++i)
		{
			var col = document.createElement ("div");
			col.className = "gridViewColumn";
			col.style.width = "" + this.sizes[i] + "px";
			col.innerHTML = "" + values[this.keys[i]];
			row.appendChild (col);
		}
		
		this.contents.appendChild(row);
		this.rowsByID[id] = row;
	}
	
	/// Default onclick handler.
	OpenPanelGrid.prototype.onclick = function(id,values) {}
	
	/// Internal click-handler.
	OpenPanelGrid.prototype.handleClick = function(domobject,id,values)
	{
		this.selectedObject = domobject;
		this.onclick(id,values);
	}
	
	/// Set the grid contents from a two dimensional dictionary
	/// in the format {rowid:{colid:value,colid:value}}.
	OpenPanelGrid.prototype.setGrid = function(dict)
	{
		this.contents.innerHTML = "";
		this.haveActiveSelection = false;
		this.rowsByID = {};
		var i=0;
		for (ki in dict)
		{
			this.addGridLine (ki,dict[ki]);
		}
	}
	
	/// Explicitly set the selected row without going through
	/// the callback.
	OpenPanelGrid.prototype.setSelection = function(id)
	{
		var oldonclick = this.onclick;
		this.onclick = function() {};
		this.rowsByID[id].onclick();
		this.onclick = oldonclick;
	}
  
	</script>
  </head>
  
  <body bgcolor="#444444">
    <div class="windowContentArea">
      <div style="margin-left: 160px;" id="gridhere"></div>
      <div id="listgrid"></div>
    </div>
    <script type="text/javascript">
      window.onload = function() {
      
        var myGrid = new OpenPanelGrid();
        myGrid.create ("gridhere",{"name":["Name",180],
        						   "age":["Age",43],
        						   "phone":["Phone#",120],
        						   "email":["Email",220],
        						   "homo":["IsHomo",48]},600,200);
        						   
      	myGrid.addGridLine("pi",{"name":"Pim van Riesbitch",
								 "age":30,
								 "phone":"0646345387",
								 "email":"pi@madscience.nl",
								 "homo":"No"});
      						
      	myGrid.addGridLine("jp",{"name":"JP Wesselbitch",
								 "phone":"0612345678",
								 "age":30,
								 "email":"jp@wesselbitch10k.com",
								 "homo":"Yes"});
      	
      	myGrid.addGridLine("lennard",{"name":"Lennard Zwartbitch",
									  "phone":"0687654321",
									  "age":30,
									  "email":"zwartbitch@panelsix.com",
									  "homo":"Yes"});
      	
      	myGrid.onclick = function(id,values)
      	{
      		console.log ("click: " + id);
      		console.log (values);
      	}
      	myGrid.setSelection("jp");
      	
      	var ListGrid = new OpenPanelGrid();
      	ListGrid.create ("listgrid",{"name":["Name",130]},150,0,101,28,-404);
      	
      	var records = {"john":{"name":"john"},"steve":{"name":"steve"},
      				   "admin":{"name":"admin"},"pete":{"name":"pete"},
      				   "angela":{"name":"angela"},"quentin":{"name":"quentin"},
      				   "pete2":{"name":"pete2"},"angela2":{"name":"angela2"},
      				   "quentin2":{"name":"quentin2"},"pete3":{"name":"pete3"},
      				   "angela3":{"name":"angela3"},"quentin3":{"name":"quentin3"},
      				   "pete4":{"name":"pete4"},"angela4":{"name":"angela4"},
      				   "quentin4":{"name":"quentin4"},"kulle":{"name":"kulle"},
      				   "hor":{"name":"hor"},"test":{"name":"test"}};
      	ListGrid.setGrid (records);
      }
    </script>
  </body>
</html>
